<template>
  <div class="container">
    <!-- 登录表单 -->
    <div class="login-form" style="margin-bottom: 100px">
      <h2 class="title">商品溯源平台</h2>
      <div class="input-address-wrap">
        <el-input v-model="address" placeholder="请输入账户地址"></el-input>
      </div>
      <div class="input-role-wrap">
        <el-select v-model="selectedRole" style="width: 100%;margin-top: 5px" placeholder="请选择角色" >
          <el-option v-for="item in roles" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </div>
      <div class="input-wrap">
        <el-button type="primary" @click="handleLogin" >登录</el-button>
      </div>
      <div class="input-wrap">
        <el-button type="success" @click="showRegisterDialog" style="margin-top: -20px">注册</el-button>
      </div>
    </div>

    <!-- 注册对话框 -->
    <el-dialog :visible.sync="dialogVisible" title="注册">
      <el-form>
        <el-form-item label="用户地址">
          <el-input v-model="address" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="角色选择">
          <el-select v-model="selectedRole" placeholder="请选择">
            <el-option v-for="role in roles" :key="role.value" :label="role.label" :value="role.value">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">取消</el-button>
        <el-button type="success" @click="handleRegister">确定注册</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios';
export default {
  name: 'HomeView',
  components: {},
  data() {
    return {
      dialogVisible: false,
      address: '',
      selectedRole: '',
      roles: [
        { value: '1', label: '生产商' },
        { value: '2', label: '供应商' },
        { value: '3', label: '零售商' },
        { value: '4', label: '消费者' },
      ]
    }
  },
  methods: {
    showRegisterDialog() {
      this.dialogVisible = true;
    },
    async handleRegister() {
      try {
        let apiEndpoint;
        switch (this.selectedRole) {
          case '1':
            apiEndpoint = '/addProduce';
            break;
          case '2':
            apiEndpoint = '/addDistributor';
            break;
          case '3':
            apiEndpoint = '/addRetailer';
            break;
          default:
            alert('请选择有效的角色');
            return;
        }
        const response = await axios({
          method: 'post',
          url: `${apiEndpoint}?account=${encodeURIComponent(this.address)}`
        });
        const result = response.data;
        if (result.ret === 1) {
          alert('注册成功');
          this.dialogVisible = false;
          this.address = '';
          this.selectedRole = '';
        } else {
          alert('注册失败: ' + result.msg);
        }
      } catch (error) {
        console.error('注册过程中发生错误', error);
        alert('注册过程中发生错误，请重试');
      }
    },

    async handleLogin() {
      try {
        let loginEndpoint = '';
        let redirectPath = '';

        switch (this.selectedRole) {
          case '1':
            loginEndpoint = '/isProducer';
            redirectPath = '/producer';
            break;
          case '2':
            loginEndpoint = '/isDistributor';
            redirectPath = '/distributor';
            break;
          case '3':
            loginEndpoint = '/isRetailer';
            redirectPath = '/retailers';
            break;
          case '4':
            this.$router.push("/consumer");
            return;
          default:
            alert("请选择有效的角色");
            return;
        }

        const response = await this.$http.get(loginEndpoint, {
          params: {
            account: this.address,
          },
        });
        const result = response.data;

        if (result.ret === 1) {
          localStorage.setItem('account', this.address);
          this.$router.push({ path: redirectPath });
        } else {
          alert("登录失败:该用户未注册");
        }
      } catch (error) {
        console.error("登录过程中出错", error);
        alert("登录过程中出错，请重试");
      }
    }
  },
}
</script>

<style scoped>

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: rgba(255, 255, 255, 0.8); /* 稍微透明的白色背景 */
}

.login-form {
  width: 60%; /* 增加宽度 */
  max-width: 500px; /* 设定最大宽度，避免在小屏幕设备上过于宽大 */
  background: white;
  padding: 3rem; /* 增加内边距 */
  border-radius: 1rem;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
}

input, select {
  width: 100%;
  padding: 1.5rem; /* 增加内边距 */
  margin: 1.5rem 0; /* 增加外边距 */
  border: none;
  border-radius: 0.5rem;
  box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.1);
}

button {
  width: 100%;
  padding: 1.5rem; /* 增加内边距 */
  margin: 1.5rem 0; /* 增加外边距 */
  background: #6a1b9a;
  color: white;
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.title {
  text-align: center;
  color: #6a1b9a;
  margin-bottom: 2rem;
}

input, select {
  width: 100%;
  padding: 1rem;
  margin: 1rem 0;
  border: none;
  border-radius: 0.5rem;
  box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.1);
}

button {
  width: 100%;
  padding: 1rem;
  margin: 1rem 0;
  background: #6a1b9a;
  color: white;
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

button:hover {
  background: #512da8;
}

/* Additional styles for the register dialog */
.el-dialog__header {
  background: #6a1b9a;
  color: white;
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
}

.el-dialog__title {
  font-weight: bold;
}

.el-dialog__body {
  padding: 2rem;
  background: white;
  border-bottom-left-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
}

.el-dialog__footer {
  display: flex;
  justify-content: flex-end;
}

.el-dialog .el-button--primary {
  background: #6a1b9a;
  color: white;
}

.el-dialog .el-button--primary:hover {
  background: #512da8;
}

.el-dialog .el-button--default {
  margin-left: 1rem;
  background: #f5f5f5;
  color: #6a1b9a;
}

.el-dialog .el-button--default:hover {
  background: #e0e0e0;
}
</style>